<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"/> 账户信息</span>
        <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData">

          <template slot="blank_1539756400000_67814" slot-scope="scope">
            <!-- 企业信息 -->
            <!-- 通过 v-model="scope.model.blank_1539756400000_67814" 绑定数据 -->
          </template>

          <template slot="blank_1539756445000_39743" slot-scope="scope">
            <!-- 产品信息 -->
            <!-- 通过 v-model="scope.model.blank_1539756445000_39743" 绑定数据 -->
          </template>

          <template slot="blank_1539756519000_32564" slot-scope="scope">
            <!-- 账户信息 -->
            <!-- 通过 v-model="scope.model.blank_1539756519000_32564" 绑定数据 -->
          </template>

        </generate-form>
      </el-tab-pane>
      <el-tab-pane label="转账信息">
        <generate-form ref="generateForm" :data="jsonData1" :remote="remoteFuncs" :value="editData"/>
      </el-tab-pane>
    </el-tabs>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  name: 'CreateFromSetname',
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539776717000_96264' }, 'key': '1539776717000_96264', 'model': 'input_1539776717000_96264', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539776718000_51554' }, 'key': '1539776718000_51554', 'model': 'input_1539776718000_51554', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539776698000_70231' }, 'key': '1539776698000_70231', 'model': 'grid_1539776698000_70231', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '公司代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539776720000_72469' }, 'key': '1539776720000_72469', 'model': 'input_1539776720000_72469', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '开户单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539776721000_17263' }, 'key': '1539776721000_17263', 'model': 'input_1539776721000_17263', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539776700000_24009' }, 'key': '1539776700000_24009', 'model': 'grid_1539776700000_24009', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '产品代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539776724000_45903' }, 'key': '1539776724000_45903', 'model': 'input_1539776724000_45903', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '产品定活标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'chanpindinghuobiaozhi' }, 'key': '1539776727000_33588', 'model': 'select_1539776727000_33588', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539776701000_13195' }, 'key': '1539776701000_13195', 'model': 'grid_1539776701000_13195', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '币种', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'bizhong' }, 'key': '1539776745000_85522', 'model': 'select_1539776745000_85522', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'date', 'name': '开户日期', 'icon': 'regular/calendar-alt', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'type': 'date', 'format': 'yyyy-MM-dd', 'timestamp': false, 'required': false, 'width': '100%', 'remoteFunc': 'func_1540450339000_9616' }, 'key': '1540450339000_9616', 'model': 'date_1540450339000_9616', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539776703000_74386' }, 'key': '1539776703000_74386', 'model': 'grid_1539776703000_74386', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'date', 'name': '到期日期', 'icon': 'regular/calendar-alt', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'type': 'date', 'format': 'yyyy-MM-dd', 'timestamp': false, 'required': false, 'width': '100%', 'remoteFunc': 'func_1540450356000_12861' }, 'key': '1540450356000_12861', 'model': 'date_1540450356000_12861', 'rules': [] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539776704000_60102' }, 'key': '1539776704000_60102', 'model': 'grid_1539776704000_60102', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }},
      jsonData1: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '转入账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539776717000_96264' }, 'key': '1539776717000_96264', 'model': 'input_1539776717000_96264', 'rules': [{ 'type': 'string', 'message': '账号格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '转入账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539776718000_51554' }, 'key': '1539776718000_51554', 'model': 'input_1539776718000_51554', 'rules': [{ 'type': 'string', 'message': '账户名称格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539776698000_70231' }, 'key': '1539776698000_70231', 'model': 'grid_1539776698000_70231', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '转入企业代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539776720000_72469' }, 'key': '1539776720000_72469', 'model': 'input_1539776720000_72469', 'rules': [{ 'type': 'string', 'message': '公司代码格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '转入单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539776721000_17263' }, 'key': '1539776721000_17263', 'model': 'input_1539776721000_17263', 'rules': [{ 'type': 'string', 'message': '开户单位格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539776700000_24009' }, 'key': '1539776700000_24009', 'model': 'grid_1539776700000_24009', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }},
      editData: {},
      values: {},
      remoteFuncs: {
        chanpindinghuobiaozhi(resolve) {
          // 产品定活标志 select_1539776727000_33588
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('产品定活标志').then(response => { resolve(response.data) })
        },

        bizhong(resolve) {
          // 币种 select_1539776745000_85522
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('币种').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
